<template>
	<view class="common-content">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false" height="88">
			<view class="common-tabs-box">
				<view class="slot-wrap">
					<view class="slot-wrap-left" @tap="back">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<!-- <view class="container"> -->
						<u-search v-model="searchVal.keyword" :show-action="showAction" height="56"
							:action-style="{color: '#fff'}" @change="searchHandle">
						</u-search>
					<!-- </view> -->
				</view>
				<u-tabs-swiper activeColor="#F4333C" ref="tabs" :list="list" :current="current"
				 @change="change"
					:is-scroll="false" swiperWidth="750" z-index="5"></u-tabs-swiper>
			</view>
		</u-navbar>
		<view class="common-content-box container" >
			<view class="news-content" v-if="dataList.length > 0">
				<view class="common-news" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
					<view class="common-news-title">
						<text :class="item.status == '-1' ? 'common-news-title-status3' : 'common-news-title-status' + item.status">{{getStatusText(item.status)}}</text><text>{{item.title || '标题'}}</text>
					</view>
					<view class="common-news-img" v-if="item.coverPath && item.coverPath.length>0">
						<image :src="img || ''" mode="aspectFill" class="news-img"
							v-for="(img,imgIndex) in item.coverPath.split(',').slice(0,3)" :key="imgIndex"
							v-if="item.resourceType == 1"></image>
						<view class="common-video" v-else-if="item.resourceType == 2">
							<image :src="img || ''" mode="aspectFill" class="news-img"
								v-for="(img,imgIndex) in item.coverPath.split(',').slice(0,1)" :key="imgIndex"></image>
							<view class="mask">
								<image src="@/static/img/knowledge/play.png" mode="" class="play-img"></image>
								<text class="time">05:00</text>
							</view>
						</view>
					</view>
					<view class="common-news-desc">
						<view>{{item.createByName || '创建人'}} {{item.createTime || '创建时间'}}</view>
						<text>{{item.numberOfComments || '0'}}评</text>
					</view>
				</view>
			</view>
		</view>
		<view class="view-more" v-if="dataList.length > 0">
			{{ isMore ? "上滑查看更多" : "没有更多了" }}
		</view>
		<view class="view-more" v-if="dataList.length == 0">
			暂无数据
		</view>
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				// 搜索
				showAction: false,
				searchVal: {
					keyword: "",
					page: 1,
					rows: this.$store.state.rows,
				},
				params: {
					page: 1,
					rows: this.$store.state.rows,
					status: null
				},
				rows: this.$store.state.rows,
				// tabs数据
				list: [{
						name: '全部',
						status: -1,
					}, {
						name: '待审核',
						status: 0,
					}, {
						name: '已通过',
						status: 1,
					},
					{
						name: '已发布',
						status: 4,
					},
					{
						name: '已撤回',
						status: 3,
					},
					{
						name: '已驳回',
						status: 2,
					}
				],
				current: 0,
				isMore: false,
				timerId: null,
				// mock
				dataList: [
					// {
					// 	title: "",
					// 	createByName: "",
					// 	status: 1,
					// 	coverPath: "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif,https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif",
					// 	type:1 // 图片
					// },
				],
			};
		},
		onLoad() {
			let pram = {
				page: 1,
				rows: this.rows,
			}
			this.getExpertKnowledge(pram)
		},
		onReachBottom() {
			if (this.isMore) {
				this.params.page++;
				this.addRandomData()
			}
		},
		methods: {
			back() {
				uni.switchTab({url: "/pages/tabbar/user/my"})
				
			},
			// 获取
			getExpertKnowledge(pram) {
				API.expertKnowledge(pram).then(res => {
					if (res.code === 200) {
						let result = res.result.rows;
						this.dataList = result;
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('知识',res);
				})
			},
			// 返回对应状态
			getStatusText(i) {
				let val = ''
				switch (i) {
					case -1:
						val = '草稿';
						break;
					case 0:
						val = '待审核';
						break;
					case 1:
						val = '已通过';
						break;
					case 2:
						val = '已驳回';
						break;
					case 3:
						val = '已撤回';
						break;
					case 4:
						val = '已发布';
						break;
					default:
						break;
				}
				return val
			},
			// 搜索
			searchHandle() {
				let pram = {
					keyword: this.trim(this.searchVal.keyword),
					page: 1,
					rows: this.rows,
				}
					clearTimeout(this.timerId);
				if(pram.keyword.length > 0){
					this.current = 0;
					console.log(pram);
					this.timerId = setTimeout(() => {
						this.getExpertKnowledge(pram); // 获取资讯集合
						// console.log('定时器');
					},500)
				}
			},
			// tabs切换
			change(index) {
					this.searchVal.keyword = "";
					console.log('当前',this.current,index);
				if (this.current != index) {
					this.current = index;
					this.params.page = 1;
					this.params.status = this.list[index].status;
					if (index === 0) {
						let pram = {
							page: 1,
							rows: this.rows,
						}
						console.log('参数',pram);
						API.expertKnowledge(pram).then(res => {
							if (res.code === 200) {
								let result = res.result.rows;
								this.dataList = result;
								console.log('知识', this.dataList);
								if (result.length >= this.rows) {
									this.isMore = true;
								} else {
									this.isMore = false;
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
							}
						})
					} else {
						// 获取数据
						let pram = {
							...this.params,
							status: this.list[index].status
						}
						console.log('参数',pram);
						API.expertKnowledge(pram).then(res => {
							if (res.code === 200) {
								let result = res.result.rows;
								this.dataList = result;
								console.log('知识', this.dataList);
								if (result.length >= this.rows) {
									this.isMore = true;
								} else {
									this.isMore = false;
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
							}
						})
					}
				}
				// console.log(index);
			},
			// 加载更多
			addRandomData() {
				let pram = {};
				if (this.current === 0) {
					pram = {
						page: this.params.page,
						rows: this.rows
					}
				} else {
					pram = {
						...this.params
					}
				}
				// console.log(pram);
				API.expertKnowledge(pram).then(res => {
					if (res.code === 200) {
						let result = res.result.rows;
						if (result.length != 0) {
							this.dataList = this.dataList.concat(result);
						}
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					}
					console.log('结果', res.result);
				})
			},
			toDetail(item) {
				// uni.setStorageSync("expertItemDetail", item);
				// uni.navigateTo({
				// 	url: "/pages/mine/knowledge/knowledgeDetail"
				// })
				let detail = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: "/pages/mine/knowledge/knowledgeDetail?item=" + detail,
				})
			},
			trim(str) {
				return str.replace(/(^\s*)|(\s*$)/g, "");
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin common-status($bgColor) {
		color: #fff;
		background-color: $bgColor;
		margin-right: 20rpx;
		padding: 0 8rpx;
	}

	// .common-tabs-box {
	// 	/deep/.u-tabs {
	// 		position: fixed;
	// 	}
	// }

	// 搜索
	.slot-wrap {
		/deep/.u-search {
			.u-content{
				margin-left: 70rpx;
				margin-right: 30rpx;
			}
		}
	}

	.common-content-box {
		padding-top: 30rpx;
		// flex: 1;
	}

	// 主体区域
	.news-content {
		background-color: #fff;
		border-radius: 14rpx;

		.common-news {
			padding: 40rpx 0;
			margin: 0 24rpx;
			border-bottom: 1px solid #E3E3E3;

			&:last-child {
				border-bottom: none;
			}

			&-title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;

				// 待审核
				&-status0 {
					@include common-status(#FFA341);
				}

				// 已通过/已发布
				&-status1,
				&-status4 {
					@include common-status(#35B572);
				}

				// 已撤回
				&-status3 {
					@include common-status(#aaaaaa);
				}

				// 已驳回
				&-status2 {
					@include common-status(#F5454E);
				}
			}

			.common-news-img {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: auto;
				padding: 20rpx 0;
				margin-bottom: 20rpx;

				.news-img {
					margin-right: 20rpx;
					width: 100%;
					height: 260rpx;

					&:last-child {
						margin-right: 0;
					}

				}

				.common-video {
					position: relative;
					width: 100%;
					height: 260rpx;

					.video {
						width: inherit;
						height: inherit;

						&:last-child {
							margin-right: 0;
						}

					}

					.mask {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 1;
						width: inherit;
						height: inherit;

						.play-img {
							width: 90rpx;
							height: 90rpx;
						}

						.time {
							position: absolute;
							bottom: 10rpx;
							left: 0;
							color: #fff;
						}
					}
				}
			}

			.common-news-desc {
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 20rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>
